import React, {
  FC,
  useRef,
  useState,
  useEffect,
  ReactNode,
  forwardRef,
} from 'react'
import { Button, Form, message, Row, Modal, AutoComplete, Select } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import commonStyle from '../../publicStyle'
import { Item, Params } from '../index.d'
import { connect } from 'umi'
const { mr20, mr10, mb20 } = commonStyle
const { confirm } = Modal
const { Option } = Select
interface IProps {
  InnerEditTable: { tableData: Item[]; selectedRowKeys: unknown[] }
  dispatch: (payload: any) => void
}
function QueryContent(props: IProps) {
  console.log('执行表头')
  const {
    InnerEditTable: { selectedRowKeys, tableData },
    dispatch,
  } = props

  const [params, setParams] = useState<Params>({
    projectID: 0,
    projectStatus: 1,
  })
  const [query, setQuery] = useState<{
    projectID: null | string
    projectStatus: null | string
  }>({
    projectID: null,
    projectStatus: null,
  })
  const [selectStatus, setSelectStatus] = useState([
    { value: 1, label: '状态1' },
    { value: 2, label: '状态2' },
    { value: 3, label: '状态3' },
    { value: 4, label: '状态4' },
  ])
  const [options, setOptions] = useState<{ value: string }[]>([])

  const onSearch = (searchText: string) => {
    const filterTableData = tableData
      .filter(item => {
        return item.projectID.indexOf(searchText) > -1
      })
      .map(i => ({ value: i.projectID }))
    // console.log(filterTableData);

    setOptions(!searchText ? [] : filterTableData)
  }

  const handleQuery = () => {
    setParams((pre: Params) => {
      pre.projectID = query.projectID
      pre.projectStatus = query.projectStatus
      return pre
    })
    console.log(query)
    //模拟查询数据
    message.info('模拟查询数据')
    const newTableData = tableData.filter(item => {
      return (
        item.projectID?.indexOf(query.projectID!) > -1 ||
        String(item.projectStatus).indexOf(query.projectStatus!) > -1
      )
    })
    // console.log(newTableData);
    dispatch({
      type: 'InnerEditTable/changeTableData',
      payload: newTableData,
    })
  }
  const handleQueryEmpty = () => {
    const newQuery = { ...query }
    newQuery.projectID = null
    newQuery.projectStatus = null
    setQuery(newQuery)
  }
  const handleDeletes = () => {
    selectedRowKeys.length &&
      confirm({
        title: '确认批量删除数据?',
        icon: <ExclamationCircleOutlined />,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          dispatch({
            type: 'InnerEditTable/tableDataDeletes',
          })
        },
      })
  }
  return (
    <div>
      <Row>
        <Form.Item label="项目编号" style={mr20}>
          <AutoComplete
            options={options}
            placeholder="请输入"
            style={{ width: 200 }}
            onSearch={onSearch}
            onChange={(e: string) => {
              const newQuery = { ...query }
              newQuery.projectID = e
              setQuery(newQuery)
            }}
            value={query.projectID}
          />
        </Form.Item>
        <Form.Item label="状态" style={mr20}>
          <Select
            placeholder="请选择"
            style={{ width: 200 }}
            value={query.projectStatus}
            onChange={e => {
              const newQuery = { ...query }
              newQuery.projectStatus = e
              setQuery(newQuery)
            }}
          >
            {selectStatus.map(item => (
              <Option value={item.value} key={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Button type="primary" style={mr10} onClick={handleQuery}>
          查询
        </Button>
        <Button style={mr10} onClick={handleQueryEmpty}>
          重置
        </Button>
        <a>展开</a>
      </Row>
      <Row style={mb20}>
        <Button
          type="primary"
          style={mr20}
          onClick={() => {
            dispatch({
              type: 'InnerEditTable/setIsModalVisible',
              payload: true,
            })
          }}
        >
          新建项目
        </Button>
        <Button onClick={handleDeletes}>批量删除</Button>
      </Row>
    </div>
  )
}

export default connect(({ InnerEditTable }: any) => ({ InnerEditTable }))(
  QueryContent,
)

function format1(value: unknown) {
  1
  ;(value as number).toFixed(2) // 不飘红，想干什么干什么，very dangerous
}
